<template>
  <div class="app-container">
    <el-card>
      <el-descriptions title="运行状态" label-class-name="labelClass" content-class-name="contentClass" border>
        <el-descriptions-item label="决策类型">水量平衡法灌溉决策</el-descriptions-item>
        <el-descriptions-item label="开始运行时间">{{ formData.plant.started_at }}</el-descriptions-item>
        <el-descriptions-item label="运行状态">
          <el-tag type="success">运行中</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div class="h12" />
    <el-card>
      <el-descriptions title="决策详情" label-class-name="labelClass" content-class-name="contentClass" border>
        <el-descriptions-item label="所在地块">{{ getAttr(formData.plant.field_id,'id',fields) }}</el-descriptions-item>
        <el-descriptions-item label="种植作物">{{ getAttr(formData.plant.crop_id,'id',crops) }}</el-descriptions-item>
        <el-descriptions-item label="生成时间">{{ formData.created_at.substr(0,10) }}</el-descriptions-item>
        <el-descriptions-item label="预计灌水日">{{ formData.created_at.substr(0,10) }}</el-descriptions-item>
        <el-descriptions-item label="预计灌水量">{{ getFloatAttr('amount',formData) }} mm</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div class="h12" />
    <el-card>
      <el-descriptions title="作物种植详情" label-class-name="labelClass" content-class-name="contentClass" border>
        <el-descriptions-item label="作物名称">{{ getAttr(formData.plant.crop_id,'id',crops) }}</el-descriptions-item>
        <el-descriptions-item label="日期">{{ formData.cropDaily.gdate.substr(0,10) }}</el-descriptions-item>
        <el-descriptions-item label="生育期">{{ formData.cropDaily.growth_stage }}</el-descriptions-item>
        <el-descriptions-item label="kc">{{ (+formData.cropDaily.kc).toFixed(3) }}</el-descriptions-item>
        <el-descriptions-item label="预测高度">{{ +formData.cropDaily.height_prog }} cm</el-descriptions-item>
        <el-descriptions-item label="实测高度">{{ +formData.cropDaily.height_real }} cm</el-descriptions-item>
        <el-descriptions-item label="ETc">{{ getFloatAttr('water_consum',formData.cropDaily) }} mm</el-descriptions-item>
        <el-descriptions-item label="预测根深">{{ +formData.cropDaily.depth_prog }} cm</el-descriptions-item>
        <el-descriptions-item label="实测根深">{{ +formData.cropDaily.depth_real }} cm</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div class="h24" />
    <el-button type="primary" icon="el-icon-bell" @click="sendMessage()">发送提醒消息</el-button>
    <el-button type="success" icon="el-icon-check" @click="changeStatus()">生成灌溉处方图</el-button>
    <el-dialog
      v-el-drag-dialog
      title="发送提醒消息"
      :visible.sync="dialogMessageVisible"
      width="60%"
      append-to-body
    >
      <send-message :form-data="formData" @sendMessageSubmit="sendMessageSubmit" />
    </el-dialog>
    <el-dialog
      v-el-drag-dialog
      title="生成灌溉处方图"
      :visible.sync="dialogStatusVisible"
      width="60%"
      append-to-body
    >
      <change-status :form-data="formData" @changeStatusSubmit="changeStatusSubmit" />
    </el-dialog>
  </div>
</template>

<script>
import ChangeStatus from './change-status'
import SendMessage from './send-message'
import { getAttr, getFloatAttr } from '@/utils'
import { mapGetters } from 'vuex'
import { messageOne } from '@/api/plantDetail'
export default {
  components: {
    ChangeStatus,
    SendMessage
  },
  props: {
    formData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  inject: ['reload'],
  data() {
    return {
      dialogMessageVisible: false,
      dialogStatusVisible: false
    }
  },
  computed: {
    ...mapGetters(['crops', 'fields'])
  },
  methods: {
    sendMessage() {
      this.dialogMessageVisible = true
    },
    async sendMessageSubmit(formData) {
      const { msg } = await messageOne(formData.id, formData)
      this.$message.success(msg)
    },
    changeStatus() {
      this.dialogStatusVisible = true
    },
    async changeStatusSubmit(formData) {
      const submitData = {
        amount: formData.amount,
        starttime: formData.created_at,
        serialno: formData.serialno,
        timetran: formData.timetran
      }
      console.log(submitData)
      this.$message.success('灌溉计划已提交')
      // const { msg } = await updateOne(formData.id, submitData)
      // this.$message.success(msg)
    },
    getAttr(value, name, datas) {
      return getAttr(value, name, datas)
    },
    getFloatAttr(name, data, precision = 2) {
      return getFloatAttr(name, data, precision)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
